<template>
  <div class="set">
      <div class="divtop">
        <TopBar :text=text />
      </div>
      <div class="divtou">
        <div class="boxtou">
          <img src="https://image.suning.cn/uimg/cmf/cust_headpic/0000000000_01_240x240.jpg" alt="">
          <div class="text">199******57</div>
          <van-icon @click="$router.push('/Personal')" name="arrow" />
        </div>
      </div>
      <div class="xinxi">
        <van-cell title="会员码" is-link value="" />
        <van-cell @click="$router.push('/PrivateInformation')" title="我的信息" is-link value="添加宝宝/尺码等信息" />
        <van-cell @click="$router.push('/Address')" title="地址管理" is-link value="新增/修改地址" />
      </div>
      <div class="setpass">
        <van-cell title="账户安全" is-link value="修改密码/修改手机号" />
        <van-cell title="新增地址" is-link value="个人增票认证" />
        <van-cell title="关联账号" is-link value="微信等" />
      </div>
      <div class="btn">
        <button class="btns" @click="clear()">退出登录</button>
      </div>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar.vue'
import { Toast } from 'vant'

export default {
  data() {
    return {
      text:'账户设置'
    }
  },
  components: {
    TopBar
  },
  methods: {
    clear() {
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('userid')
      Toast("退出成功")
      this.$router.push('/home/hompage')
    }
  }
}
</script>

<style lang="scss" scoped>
.set{
      width: 100%;
      // box-sizing: border-box;
      // background-color: #ffffff;
  .divtop {
      width: 100%;
      height: 0.45rem;
      background-color: #ffffff;
      .topbox {
        width: 95%;
        padding: 0.05rem 2.5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .img {
          width: 0.555rem;
          height: 0.45rem;
          display: flex;
  
          img {
            width: 60%;
            height: 60%;
          }
        }
  
        .my {
          font-size: 0.17rem;
        }
  
        .div {
          font-size: 0.15rem;
          box-sizing: border-box;
          height: 100%;
        }
      }
    }
    .divtou{
      width: 100%;
      background-color: #ffffff;
      .boxtou{
        height: 0.7rem;
        box-sizing: border-box;
        border-top: 1px solid #f3f3f3;
        width: 95%;
        margin: 2.5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width: 0.45rem;
          height: 0.45rem;
        }
        .text{
          font-size: 0.14rem;
        }
        .van-icon{
          font-size: 0.12rem;
        }
      }
    }
    .xinxi{
      margin: 0.12rem 0;
      background-color: #f2f2f2;
    }
    .btn{
      font-size: 0.15rem;
      width: 100%;
      .btns{
        width: 95%;
        height: 0.4rem;
        background-color: #ff6600;
        border: none;
        border-radius: 0.12rem;
        color: #ffffff;
        text-align: center;
        margin: 0.45rem 2.5%;
      }
    }
}
</style>